<template>
  <div>
    <el-date-picker
      v-model="selectedDate"
      type="date"
      placeholder="选择日期"
      :disabled-date="disabledDate"
      @change="updateDate"
      format="MM/dd"  <!-- 自定义显示格式 -->
    ></el-date-picker>
    <p>选择的日期: {{ formattedDate }}</p>
  </div>
</template>

<script>
import { ref, computed } from 'vue';

export default {
  setup() {
    const selectedDate = ref('');

    const formattedDate = computed(() => {
      if (!selectedDate.value) return '';
      const date = new Date(selectedDate.value);
      const month = date.getMonth() + 1; // 月份从0开始
      const day = date.getDate();
      return `${month}月${day}日`;
    });

    const disabledDate = (time) => {
      // 禁用未来日期
      return time > Date.now();
    };

    const updateDate = () => {
      // 处理日期变化后的逻辑
      console.log(`选择的日期: ${formattedDate.value}`);
    };

    return {
      selectedDate,
      formattedDate,
      disabledDate,
      updateDate,
    };
  },
};
</script>

<style scoped>
/* 添加一些样式（如果需要） */
</style>